<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>采购入库单</title>
<link rel="stylesheet" href="${ctx}/static/layui/css/layui.css">
<style type="text/css">
.layui-unselect.layui-form-select {
	width: 25%;
	display: -webkit-inline-box;
}

.layui-unselect.layui-form-select .layui-select-title {
	width: 100%;
}
</style>
</head>
<body>
	<script type="text/html" id="demoTable">
		<div>
			票号:<input type="text" name="obill" id="obill" readonly="readonly"
				style="border: 0px"> 
			<span style="float: right;">日期:<input type="text" name="odate" id="odate" readonly="readonly"
				style="border: 0px"></span>
		</div>
		<div style="width: 100%">
			供应商：<select name="osname" id="osname">
				<c:forEach var="list" items="${sessionScope.supplier}">
					<option value="${list}">${list}</option>
				</c:forEach>
			</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			采购员：<select name="oname" id="oname">
				<option value="李白">李白</option>
				<option value="杜甫">杜甫</option>
				<option value="杨贵妃">杨贵妃</option>
			</select> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			单据号:<input type="text" name="onum" id="onum">&nbsp;&nbsp;&nbsp;
			仓库：<select name="odepot" id="odepot">
				<option value="仓库1">仓库1</option>
				<option value="仓库2">仓库2</option>
			</select>
		</div>
		商品名称：<select name="gname" id="gname">
				<c:forEach var="list" items="${sessionScope.goods}">
					<option value="${list.gname}">${list.gname}</option>
				</c:forEach>
		</select>
		<button class="layui-btn" id="addTable" onclick="addTable()">新增一行</button>
		<button class="layui-btn"  onclick="saveTable(0)">保存</button>
		<button class="layui-btn"  onclick="saveTable(1)">审核入库</button>
	</script>

	<table class="layui-table" id="aaa" 
		lay-data="{height:560,page:true,toolbar:'#demoTable', url : '${ctx}/test/sss'}"
		lay-filter="test">
		<thead>
			<tr>
				<th lay-data="{field:'oid',fixed: true}">商品ID</th>
				<th lay-data="{field:'gname'}">商品名称</th>
				<th lay-data="{field:'gtype'}">分类</th>
				<th lay-data="{field:'gnorms'}">规格</th>
				<th lay-data="{field:'num',edit: 'text'}">数量</th>
				<th lay-data="{field:'gunit'}">单位</th>
				<th lay-data="{field:'price',edit: 'text'}">单价</th>
				<th lay-data="{field:'money'}">金额</th>
				<th lay-data="{field:'gbrand'}">品牌</th>
				<th lay-data="{field:'gcode'}">条码</th>
				<th lay-data="{field:'msg',edit: 'text'}">备注</th>
				<th lay-data="{field:'ostate',hide:'true',value:'0'}">状态</th>
				<th
					lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}">操作</th>
			</tr>
		</thead>
	</table>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

	<script src="${ctx}/static/layui/layui.all.js"></script>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
		$(function() {
			var myDate = new Date();
			var year = myDate.getFullYear();
			var month = myDate.getMonth() + 1;
			var date = myDate.getDate();
			var a = year + "-" + month + "-" + date;
			var b = year + "" + month + "" + date;
			$("#obill").val(b);
			$("#odate").val(a);	
		})
		
		function getTime() {
			var myDate = new Date();
			var year = myDate.getFullYear();
			var month = myDate.getMonth() + 1;
			var date = myDate.getDate();
			var a = year + "-" + month + "-" + date;
			var b = year + "" + month + "" + date;
			$("#obill").val(b);
			$("#odate").val(a);	
		}
		
		function addTable(){
			var gname=$("#gname").val();
			$.ajax({
				data : {
					'm' : JSON.stringify(data),
					gname:gname
				},
				url:'test/bbb'
			})
			layui.table.reload('aaa');
			getTime();
		}
		
		var sign;
		function saveTable(datas){
			if(datas==0){
				sign=0;
			}else if(datas==1){
				sign=1;
			}
			var obillStr=$("#obill").val();
			var odateStr=$("#odate").val();
			var osnameStr=$("#osname").val();
			var onameStr=$("#oname").val();
			var onumStr=$("#onum").val();
			var odepotStr=$("#odepot").val();
			
			$.ajax({
				url:'${ctx}/test/save',
				type:'post',
				data:{
					sign:sign,
					obill:obillStr,
					odate:odateStr,
					osname:osnameStr,
					oname:onameStr,
					onum:onumStr,
					odepot:odepotStr,
				},
				success:function(vals){
					if(vals=='ok'){
						layer.alert("新增成功!",{icon:1});
					}else{
						layer.alert("新增失败！",{icon: 5});
					}
				},
				error:function(){
					 layer.alert('未知错误！！！',{icon:5});
				}
			})
		}
		var data = [];
		layui.use('table', function() {
			var table = layui.table;
			//编辑监听
			table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
				/* console.log(obj.value); //得到修改后的值
				console.log(obj.field); //当前编辑的字段名
				console.log(obj.data); //所在行的所有相关数据   */
				if (obj.data.num!="" && obj.data.price!="") {
					var dd = '<div class="layui-table-cell laytable-cell-3-0-7">'+obj.data.num*obj.data.price+'</div>';
					$("td[data-field='money']:eq("+obj.tr.selector.split("\"")[1]+")").text("");
					$("td[data-field='money']:eq("+obj.tr.selector.split("\"")[1]+")").append(dd);
					obj.data.money = obj.data.num*obj.data.price;
				}
			
				var i = null;
				for (var d in data) {
					 if (data[d].key==obj.data.oid) {
						 i = d;
					 }
				}
				if (i!=null) {
					data[i].value = obj.data;
				}else {
					var o = {};
					o.key = obj.data.oid;
					o.value = obj.data;
					data.push(o);
				}
				
			 	if (data.length==0) {
					var o = {};
					o.key = obj.data.oid;
					o.value = obj.data;
					data.push(o);
				}
				console.log(data.length);
			 	console.log(data);
			});
			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
			    //console.log(obj)
			    if(obj.event === 'del'){ 
			        obj.del();
			       // layer.close(index);
			        var oid=obj.data.oid;
			        $.ajax({
			        	url:'${ctx}/test/del',
			        	data:{
			        		oid:oid	
			        	},
			        	type:'post'
			        });
			    }
			});
			
		});
	</script>
</body>
</html>